<template>
  <div>
    <!--  通讯录-->
    <div>
      <el-row :gutter="24" style="padding: 10px">
        <el-col :span="2" style="text-align: center;line-height: 32px">
          {{ $t('姓名') }}
        </el-col>
        <el-col :span="8">
          <el-input v-model="page.remarks" clearable/>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getList">{{ $t('查询') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <Table style="margin-bottom: 10px" :table-column="tableColumn" :table-data="tableData" :page="page" border
           max-height="400px"
           @handleSizeChange="handleSizeChange"
           @handleCurrentChange="handleCurrentChange"
           :header-style="{backgroundColor:'#fffbed'}">
      <template slot="phone" slot-scope="{row}">
        <el-popover
            placement="right"
            width="120px"
            trigger="click">
          <SelectCallPhone :phone="row.phone" :modeType="routesQuery.modeType" modeKey="addressBook"
                           :orderId="routesQuery.orderId"/>
          <el-link slot="reference" :underline="false" type="primary">{{
              row.phone
            }}
          </el-link>
        </el-popover>

      </template>
    </Table>

  </div>
</template>
<script>
import {fetchMailList} from '@/api/order'
export default {
  props: ['routesQuery'],
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('姓名'), align: 'center', prop: 'remarks', minWidth: 150, isHtml: true},
        {label: this.$t('手机号码'), align: 'center', prop: 'phone', slot: 'phone', minWidth: 150},
        {label: this.$t('本地最后通话时间'), align: 'center', prop: 'localLastCallTime', minWidth: 150},
        {label: this.$t('本地最后通话时长'), align: 'center', prop: 'localLastCallDuration', minWidth: 150},
        {label: this.$t('运营商最后通话时长'), align: 'center', prop: 'lastCallDuration', minWidth: 150},
        {label: this.$t('运营商最后通话时间'), align: 'center', prop: 'lastCallTime', minWidth: 150},
        {label: this.$t('是否黑名单'), align: 'center', prop: 'blacklist', minWidth: 100, isHtml: true},
        {label: this.$t('是否灰名单'), align: 'center', prop: 'isGreyList', minWidth: 100, isHtml: true},
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      nameKeyWord: []
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      console.log(this.routesQuery)
      const {userId,orderId} = this.routesQuery
      const res = await fetchMailList({
        userId: parseInt(userId),
        loanRecordId:orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {addressList: {list, pageNum, total, pageSize}, addressBookTag} = res.data
        this.nameKeyWord = addressBookTag
        this.tableData = list.map(item => {
          item.localLastCallDuration = item.localLastCallDuration ? item.localLastCallDuration + 's' : ''
          item.lastCallDuration = item.lastCallDuration ? item.lastCallDuration + 's' : ''
          item.blacklist = item.blacklist === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.isGreyList = item.isGreyList === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.remarks = this.signSensitive(item.remarks)
          return item
        })
        this.page = {
          ...this.page,
          total: total,
        }
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    /**
     *  关键词标红
     *  message 短信内容
     *  nameKeyWord 要标红关键词数组
     */
    signSensitive(message) {
      const nameKeyWord = this.nameKeyWord
      if (nameKeyWord && nameKeyWord.length) {
        for (let i = 0; i < nameKeyWord.length; i++) {
          let reg = new RegExp("(" + nameKeyWord[i].value + ")", "g")
          message = message.replace(reg, `<font style="color: red">${nameKeyWord[i].value}</font>`)
        }
      }
      return message
    }
  }
}
</script>

<style scoped>

</style>
